<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <h2>天气很{{info}}</h2>
    <button @click="swi()">切换</button>


</div>
</body>
<!--监视属性：
       1.当被监视的属性变化时，回调函数handler自动执行，进行相关操作
       2.监视的属性必须存在，才能进行监视
       3.监视的两种写法：
            1.new Vue时传入watch配置
            2.同过vm.$watch('yy',{fun})监视
 -->
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            ishot:true
        },
        computed:{
            info(){
                return this.ishot? '热':'凉'
            }
        },
        methods:{
            swi(){
                this.ishot=!this.ishot
            }
        },
        // watch:{
        //     ishot:{
        //         // handler什么时候调用？  ishot发生改变时
        //         //还可存储改变前后的数据
        //         immediate:true,//初始化时让handler调用一次
        //         handler(newValue,oldValue){
        //             console.log('ishot被修改了')
        //             console.log(newValue)
        //             console.log(oldValue)
        //
        //         }
        //     },
        //     info:{
        //         // handler什么时候调用？  ishot发生改变时
        //         //还可存储改变前后的数据
        //         immediate:true,//初始化时让handler调用一次
        //         handler(newValue,oldValue){
        //             console.log('info被修改了')
        //             console.log(newValue)
        //             console.log(oldValue)
        //
        //         }
        //     }
        // }

    })
    //watch的vm写法
    vm.$watch('ishot',{
        immediate:true,//初始化时让handler调用一次
                handler(newValue,oldValue){
                    console.log('ishot被修改了')
                    console.log(newValue)
                    console.log(oldValue)

                }
    })
</script>
</html>